<script>
import thesaurusIcon from "../assets/thesaurus.png"
import calendarIcon from "../assets/calendar.png"
import calenderIcon from "../assets/calendar.png"
import store from "../../../../store"
import { userActionType } from "@/store/modules/user"
import { getShowImage, showToast } from "@/utils"
import editIcon from "../assets/edit.png"
import vocabularyBookIcon from "../assets/vocabularyBook.png"
import finishedIcon from "../assets/finished.png"
import errorIcon from "../assets/error.png"
import collectionIcon from "../assets/collection.png"
import checkIsVip from "@/components/checkIsVip/index.vue"
import shareInfo from "@/utils/shareInfo"
import urlUtils from "@/utils/urlUtils"

export default {
  name: "learnVocabulary",
  components: { checkIsVip },
  data() {
    return {
      thesaurusIcon,
      calendarIcon,
      editIcon,
      vocabularyBookIcon,
      calenderIcon,
      finishedIcon,
      errorIcon,
      collectionIcon,
			planInfo: null,
			setPlanInfo(planInfo) {
				this.planInfo = planInfo
			}
    }
  },
  computed: {
    showToast() {
      return showToast
    },
    //剩余打卡的天数
    remainingDays() {
      if (!this.planInfo) {
        return 0
      }
      return Math.ceil((this.planInfo.thesaurusNum - this.planInfo.studyWordNum) / this.planInfo.dailyWordCount)
    },
  },
  methods: {
    getShowImage,
    //制定 学习计划
    async makeLearningPlan() {
      //没有选择考试选择考试
      if (!(await store.dispatch(userActionType.action.examInfo))) {
        uni.navigateTo({
          url: "/pages/examSelection/index",
        })
      }
      //先前制定过计划了
      if (this.planInfo) {
        uni.navigateTo({
          url: "/vocabulary/pages/makeLearningPlan/schedule",
        })
        //新用户先前没有制定过计划
      } else {
        uni.navigateTo({ url: "/vocabulary/pages/makeLearningPlan/thesaurus" })
      }
    },
    //前往背单词
    async goLearning() {
      //判断该计划绑定的词库的判断规则
      if (this.planInfo.businessRules === "MemberFree") {
        if (!(await this.$refs.checkIsVip.checkIsVip())) return
      }
      uni.navigateTo({
        url: "/vocabulary/pages/learning/index",
      })
    },
    //前往复习
    goReview() {
      //判断是否有单词需要复习
      if (this.planInfo.unreviewedWordCount === 0) {
        showToast.default("暂无需要复习的单词")
        return
      }
      uni.navigateTo({
        url: "/vocabulary/pages/learning/review",
      })
    },
  },
}
</script>

<template>
  <view class="page">
    <view class="block">
      <!--		词库信息和背单词的进度-->
      <view class="thesaurus-info" @click="makeLearningPlan">
        <image class="icon-container" :src="thesaurusIcon" v-if="!planInfo" mode="aspectFill"></image>
        <image class="icon-container" :src="getShowImage(planInfo.thesaurusImg)" v-else></image>
        <view class="right">
          <view class="thesaurus-name">{{ planInfo ? planInfo.thesaurusName : "请先制定学习计划" }} </view>
          <view class="process-bar">
            <view
              class="process-bar-content"
              v-if="planInfo"
              :style="'width:' + 100 * (planInfo.studyWordNum / planInfo.thesaurusNum) + '%'"
            ></view>
          </view>
          <view class="process-text">
            <template v-if="!planInfo">
              <text>已掌握 0/0 词</text>
              <text>剩余 0 天</text>
            </template>
            <template v-else>
              <text>{{ planInfo.studyWordNum + " / " + planInfo.thesaurusNum + " 词" }} </text>
              <text style="font-style: italic">{{ `剩余 ${remainingDays} 天` }}</text>
            </template>
          </view>
        </view>
      </view>
      <!--		需要学习和需要复习的单词个数-->
      <view class="days">
        <view class="day-item">
          <view class="day">
            <text class="number">{{ planInfo.unreviewedWordCount }}</text>
            <text class="text">词</text>
          </view>
          <view class="text">需复习</view>
        </view>
        <view class="day-item">
          <view class="day">
            <!--						如果背完了则需学习的数量置 0-->
            <text class="number"
              >{{ planInfo.studyWordNum >= planInfo.thesaurusNum ? 0 : planInfo.dailyWordCount - planInfo.learnWordCount }}
            </text>
            <text class="text">词</text>
          </view>
          <view class="text">今日需学习</view>
        </view>
      </view>
      <!--		打卡 背单词按钮-->
      <view class="button" @click="makeLearningPlan" v-if="!planInfo"> 制定学习计划 </view>
      <view class="btn-list" v-else>
        <!--				复习单词-->
        <view class="primary btn" @click="goReview">复习已学</view>
        <!--				学习单词-->
        <view
          class="btn theme"
          v-if="planInfo.studyWordNum >= planInfo.thesaurusNum"
          @click="() => showToast.default('请点击“更改计划”选择其他词库继续学习', 3000)"
          >该计划已完成</view
        >
        <view class="btn theme" @click="goLearning" v-else-if="!planInfo.isCurrentDayStudying"> 今日学习 </view>
        <view class="btn theme" @click="goLearning" v-else> 继续学习</view>
      </view>
      <view class="footer" v-if="planInfo">
        <!--		更改学习计划按钮-->
        <view class="setting-btn btn" @click="makeLearningPlan">
          <image :src="editIcon" class="icon"></image>
          更改计划
        </view>
        <!--			我的单词本按钮-->
        <view class="btn" @click="$uni.navigateTo({ url: '/vocabulary/pages/myVocabularyBook/index' })">
          <image class="icon" :src="vocabularyBookIcon"></image>
          我的单词本
        </view>
      </view>
    </view>
    <view class="block">
      <view class="app-list">
        <view class="app-item" @click="() => $uni.navigateTo({ url: '/mine/pages/learningLog/index' })">
          <image class="icon" :src="calenderIcon"></image>
          <view class="app-name">学习日志</view>
        </view>
        <view class="app-item" @click="() => $uni.navigateTo({ url: '/vocabulary/pages/myVocabularyBook/index?currentTab=wordList' })">
          <image class="icon" :src="finishedIcon"></image>
          <view class="app-name">已背单词</view>
        </view>
        <view class="app-item" @click="() => $uni.navigateTo({ url: '/vocabulary/pages/myVocabularyBook/index?currentTab=wrong' })">
          <image class="icon" :src="errorIcon"></image>
          <view class="app-name">错词</view>
        </view>
        <view class="app-item" @click="() => $uni.navigateTo({ url: '/vocabulary/pages/myVocabularyBook/index?currentTab=favorite' })">
          <image class="icon" :src="collectionIcon"></image>
          <view class="app-name">单词收藏</view>
        </view>
      </view>
    </view>

    <checkIsVip ref="checkIsVip"></checkIsVip>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding: 30rpx;
  .block {
    background: white;
    padding: 50rpx;
    border-radius: 30rpx;
    &:not(:first-child) {
      margin-top: 30rpx;
    }

    .thesaurus-info {
      display: flex;
      align-items: center;

      > .icon-container {
        width: 130rpx;
        height: 150rpx;
        border-radius: 20rpx;
      }

      > .right {
        margin-left: 40rpx;
        width: 0;
        flex: 1;

        .thesaurus-name {
          font-size: 34rpx;
          color: var(--text-color);
        }

        .process-bar {
          width: 100%;
          height: 20rpx;
          background: var(--theme-color-light);
          border-radius: 10rpx;
          margin-top: 20rpx;
          overflow: hidden;

          .process-bar-content {
            height: 100%;
            width: 0;
            border-radius: 10rpx;
            background: var(--theme-color);
          }
        }

        .process-text {
          font-size: 30rpx;
          color: var(--text-color-light);
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          width: 100%;
        }
      }
    }

    .days {
      display: flex;
      margin: 40rpx 0;

      .day-item {
        width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:not(:last-child) {
          border-right: 2rpx solid var(--border-color);
        }

        > .day {
          color: var(--text-color);

          .number {
            font-size: 44rpx;
          }

          .text {
            font-size: 30rpx;
            margin-left: 10rpx;
          }
        }

        > .text {
          font-size: 30rpx;
          color: var(--text-color-light);
        }
      }
    }

    > .button {
      width: 100%;
      height: 90rpx;
      background: var(--theme-color);
      border-radius: 45rpx;
      color: var(--text-color-white);
      font-weight: 500;
      font-size: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-list {
      display: flex;
      justify-content: space-between;
      .btn {
        height: 80rpx;
        width: 280rpx;
        border-radius: 40rpx;
        font-weight: 500;
        font-size: 36rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &.theme {
          background: var(--theme-color);
          color: var(--text-color-white);
        }
        &.primary {
          background: #98caff;
        }
      }
    }

    > .footer {
      display: flex;
      justify-content: space-between;

      > .btn {
        display: flex;
        align-items: center;
        margin-top: 50rpx;
        color: var(--text-color-light);
        font-size: 32rpx;

        .icon {
          width: 38rpx;
          height: 38rpx;
          margin-right: 10rpx;
        }
      }
    }

    .app-list {
      display: flex;
      .app-item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .icon {
          width: 50rpx;
          height: 50rpx;
        }
        .app-name {
          font-size: 28rpx;
          color: var(--text-color);
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
